<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
      function $(id) {
      return document.getElementById(id)
      }
      function checkUserName() {
        let rexp = /^[a-zA-Z\u4e00-\u9fa5]{2,20}$/
        if(rexp.test($('userName').value)){
          $('nameSpan').innerHTML="验证通过"
          $('nameSpan').style.color="green"
          return true
        }
        else {
          $('nameSpan').innerHTML="用户名必须是2-20个字母"
          $('nameSpan').style.color="red"
          return false
        }
      }
      function checkPwd() {
        let rexp = /^[\d]{6}$/
        if(rexp.test($('pwd').value)){
          $('pwdSpan').innerHTML="验证通过"
          $('pwdSpan').style.color="green"
          return true
        }
        else {
          $('pwdSpan').innerHTML="密码必须是6位数字"
          $('pwdSpan').style.color="red"
          return false
        }
      }
      function checkemail() {
        let rexp = /^[0-9a-zA-Z]{3,}@[0-9a-zA-Z]{2,}[.](com|cn|net)$/
        if(rexp.test($('email').value)){
          $('emailSpan').innerHTML="验证通过"
          $('emailSpan').style.color="green"
          return true
        }
        else {
          $('emailSpan').innerHTML="电子邮件必须是XX@XX.com格式"
          $('emailSpan').style.color="red"
          return false
        }
      }
      function checkphone() {
        let rexp = /^1(3|5|8)[\d]{9}$/
        if(rexp.test($('phone').value)){
          $('phoneSpan').innerHTML="验证通过"
          $('phoneSpan').style.color="green"
          return true
        }
        else {
          $('phoneSpan').innerHTML="电话号码必须是13、15、18开始的11位数字。"
          $('phoneSpan').style.color="red"
          return false
        }
      }
      function checkBirthday() {
        let rexp = /^[\d]{4}-[\d]{2}-[\d]{2}$/
        if(rexp.test($('birthday').value)){
          $('birthdaySpan').innerHTML="验证通过"
          $('birthdaySpan').style.color="green"
          return true
        }
        else {
          $('birthdaySpan').innerHTML="生日为XXXX-XX-XX"
          $('birthdaySpan').style.color="red"
          return false
        }
      }
      function submit() {
         if(checkUserName() && checkPwd() && checkemail() && checkBirthday() && checkphone()){
           $('f2').submit()
         }
      }
  </script>
</head>
<body>
   <form action="add" id="f2">
    用户名:<input type="text" onblur="checkUserName()" name="userName" id="userName"><span id="nameSpan"></span><br>
     密码:<input type="password" onblur="checkPwd()" name="pwd" id="pwd"><span id="pwdSpan"></span><br>
     电子邮件:<input type="text" onblur="checkemail()" name="email" id="email"><span id="emailSpan"></span><br>
     电话:<input type="text" onblur="checkphone()" name="phone" id="phone"><span id="phoneSpan"></span><br>
     生日:<input type="text" onblur="checkBirthday()" name="birthday" id="birthday"><span id="birthdaySpan"></span><br>
   </form>
    <input type="button" value="提交" onclick="submit()">
</body>
</html>
